<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <title>图片格式转换器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 主题切换器 -->
    <div class="theme-switcher">
        <button class="theme-toggle-btn" id="themeToggle">
            🎨
        </button>
        <div class="theme-menu" id="themeMenu">
            <div class="theme-option theme-default" data-theme="default">
                 <div class="theme-color"></div>
                 <span>默认主题</span>
             </div>
             <div class="theme-option theme-light" data-theme="light">
                 <div class="theme-color"></div>
                 <span>护眼白色</span>
             </div>
             <div class="theme-option theme-dark active" data-theme="dark">
                 <div class="theme-color"></div>
                 <span>护眼深色</span>
             </div>
            <div class="theme-option theme-green" data-theme="green">
                <div class="theme-color"></div>
                <span>护眼绿色</span>
            </div>
            <div class="theme-option theme-blue" data-theme="blue">
                <div class="theme-color"></div>
                <span>护眼蓝色</span>
            </div>
            <div class="theme-option theme-purple" data-theme="purple">
                <div class="theme-color"></div>
                <span>护眼紫色</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h1>图片格式转换器</h1>
        
        <div class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-content">
                    <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7,10 12,15 17,10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    <p>点击选择图片或拖拽图片到此处</p>
                    <p class="upload-hint">支持 PNG、JPG、JPEG、WebP、BMP、GIF 格式</p>
                </div>
                <input type="file" id="fileInput" multiple accept="image/*" style="display: none;">
            </div>
        </div>

        <div class="settings-section" id="settingsSection" style="display: none;">
            <div class="format-selection">
                <h3>选择输出格式</h3>
                <div class="format-options">
                    <label class="format-option">
                        <input type="radio" name="format" value="png" checked>
                        <span>PNG</span>
                    </label>
                    <label class="format-option">
                        <input type="radio" name="format" value="jpeg">
                        <span>JPG</span>
                    </label>
                    <label class="format-option">
                        <input type="radio" name="format" value="webp">
                        <span>WebP</span>
                    </label>
                </div>
            </div>

            <div class="naming-section">
                <h3>文件命名方式</h3>
                <div class="naming-options">
                    <label class="naming-option">
                        <input type="radio" name="naming" value="direct" checked>
                        <span>直接转换</span>
                    </label>
                    <label class="naming-option">
                        <input type="radio" name="naming" value="random">
                        <span>随机命名</span>
                    </label>
                    <label class="naming-option">
                        <input type="radio" name="naming" value="numbered">
                        <span>数字排序 (1-n)</span>
                    </label>
                    <label class="naming-option">
                        <input type="radio" name="naming" value="custom">
                        <span>自定义命名</span>
                    </label>
                </div>
                
                <div class="custom-naming" id="customNaming" style="display: none;">
                    <input type="text" id="customNameInput" placeholder="输入文件名前缀">
                    <small>多个文件将自动添加数字后缀</small>
                </div>
            </div>

            <div class="quality-section">
                <h3>图片质量</h3>
                <div class="quality-control">
                    <input type="range" id="qualitySlider" min="0.1" max="1" step="0.1" value="0.9">
                    <span id="qualityValue">90%</span>
                </div>
            </div>

            <button class="convert-btn" id="convertBtn">开始转换</button>
        </div>

        <div class="preview-section" id="previewSection" style="display: none;">
            <h3>图片预览</h3>
            <div class="preview-grid" id="previewGrid"></div>
        </div>

        <div class="download-section" id="downloadSection" style="display: none;">
            <h3>下载转换后的图片</h3>
            <div class="download-grid" id="downloadGrid"></div>
            <button class="download-all-btn" id="downloadAllBtn">下载全部</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>